<template>


  <div>

    <el-row>


      <el-col :span="12">
          <el-button @click="showEdit=true">添加</el-button>




      </el-col>
<!--      <el-col :span="12"><div class="grid-content ep-bg-purple-dark" /></el-col>-->
    </el-row>


    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="userid" label="userid" width="180"/>
      <el-table-column prop="username" label="username" width="180"/>
      <el-table-column prop="password" label="password"/>
      <el-table-column prop="nickname" label="nickname"/>
      <el-table-column prop="expire" label="expire"/>
      <el-table-column prop="lastLogin" label="lastLogin"/>
      <el-table-column prop="deptId" label="deptId"/>
      <el-table-column prop="deptName" label="deptName"/>
      <el-table-column prop="registLevel" label="registLevel"/>
      <el-table-column prop="createtime" label="createtime"/>
      <el-table-column prop="userid" label="操作">
        <template #default="scope">
          {{ scope.row.userid }}
          <el-button link type="primary" @click="deleteById(scope.row.userid)">删除</el-button>
        </template>
      </el-table-column>

    </el-table>
    <el-pagination
        v-model:current-page="queryParam.current"
        :page-sizes="[3, 5, 10, 15,20,30,40]"
        v-model:page-size="queryParam.size"
        :size="queryParam.size"
        layout="sizes, prev, pager, next"
        :total="total"
        @size-change="loadUserList"
        @current-change="loadUserList"
    />

<!--   -->
<!--    -->



    <el-dialog title="用户添加" width="600px"  v-model="showEdit" >

      <el-form :model="form" label-width="auto"  inline>
        <el-form-item label="用户名">
          <el-input v-model="form.username" />
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="form.password" />
        </el-form-item>

        <el-form-item label="昵称">
          <el-input v-model="form.nickname" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="save">保存</el-button>
          <el-button  @click="closeDialog()">Cancel</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>


  </div>










</template>


<script lang="ts" setup name="User">

import {ref, onMounted, reactive} from 'vue'
import {service} from "@/utils/request";
import {useRouter} from 'vue-router'

const tableData = ref<[]>()
const queryParam = reactive({
  current:1,
  size:5,
});
const total = ref(0);

const form = reactive({
  username:'',
  password:'',
  nickname:'',
})
const showEdit = ref(false);

const router = useRouter();





interface PageInfo{
  current:number;
  size:number;
  total:number;
  pages:number;
  data:[];
}



function loadUserList() {

  // 为给定 ID 的 user 创建请求
  //data  真实的数据
  service.get<PageInfo>('/user/page',{params:queryParam}).then(function (page) {
    tableData.value = page.data;
    total.value =  page.total;
  })

}


function deleteById(id: string) {
  service.get<boolean>('/user/delete?id=' + id).then(function (success) {
    if (success) {
      alert("删除成功");
      loadUserList();
    } else {
      alert("删除失败")
    }

  })
}

function save(){

  console.log(form)
  service.get('/user/save',{params:form}).then(function (success) {
    if (success) {
      alert("保存成功");
      closeDialog();
      loadUserList();
    } else {
      alert("保存")
    }

  })
}

function closeDialog(){
  showEdit.value=false
}

onMounted(() => {
  // 获取数据
  loadUserList();

})


</script>
